<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        fileexplorer
      </h1>
      <div>{{ hello }}</div>
      <div>{{ hello2 }}</div>
      <div>{{ hello3 }}</div>
    </div>
  </div>
</template>

<script>
import gql from 'graphql-tag'
export default {
  apollo: {
    // 简单的查询，将更新 'hello' 这个 vue 属性
    hello: {
      query: gql`
        query ($name: String!) {
          hello(name: $name)
        }
      `,
      variables() {
        return {
          name: 'ab',
        }
      },
    },
     // list1: {
    //   query: gql`
    //     query($path: String!) {
    //       list(path: $path) {
    //         name
    //         path
    //         icon
    //         mtime
    //         type
    //         size
    //         atime
    //       }
    //     }
    //   `,
    //   variables() {
    //     return {
    //       path: this.path,
    //     }
    //   },
    // },
    // $subscribe: {
    //   // 当添加一个标签时
    //   list2: {
    //     query: gql`
    //       subscription($path: String!) {
    //         list(path: $path) {
    //           name
    //           path
    //           icon
    //           mtime
    //           type
    //           size
    //           atime
    //         }
    //       }
    //     `,
    //     // 响应式变量
    //     variables() {
    //       // 像常规查询一样运作
    //       // 在每次改变值时都会使用正确的变量重新订阅
    //       return {
    //         path: this.path,
    //       }
    //     },
    //     // 结果钩子
    //     // 不要忘记对 `data` 进行解构
    //     result({ data }) {
    //       this.list = data.list
    //     },
    //   },
    // },
  },
  async asyncData({ $axios }) {
    const apiUrl = process.server ? 'http://127.0.0.1:7002/api' : ''
    const hello2 = await $axios.$get(`${apiUrl}/abc`)
    return { hello2 }
  },
  data() {
    return {
      hello3: '',
    }
  },
  methods: {
    async getHello3(name) {
      const { data: { hello } } = await this.$apollo.query({
        query: gql`
          query ($name: String!){
            hello(name: $name)
          }
        `,
        variables: {
          name,
        },
      })
      this.hello3 = hello
    },
        // watchFile() {
    //   this.$apollo
    //     .subscribe({
    //       query: gql`
    //         subscription($path: String!) {
    //           list(path: $path) {
    //             name
    //             path
    //             icon
    //             mtime
    //             type
    //             size
    //             atime
    //           }
    //         }
    //       `,
    //       variables: {
    //         path: this.path,
    //       },
    //     })
    //     .subscribe({
    //       next(data) {
    //         console.log(data.data.list)
    //       },
    //       error(error) {
    //         console.error(error)
    //       },
    //     })
    // },
  },
  mounted() {
    this.getHello3('hhhh1')
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
